<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>权限列表</title>
    <link rel="stylesheet" href="/css/index.css" type="text/css">
    <script src="/js/vue.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/js/qs.min.js"></script>
    <script src="/js/index.js"></script>

</head>
<body>
<div id="app">
    <!-- 表单模态框区域 -->
    <el-button type="text" @click="dialogFormVisible = true">添加权限</el-button>
    <el-dialog title="订单" :visible.sync="dialogFormVisible" @close="closeDialog">
        <el-form :model="functionOne">
            <el-form-item label="权限名">
                <el-input v-model="functionOne.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="functionOne.description" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="路径">
                <el-input v-model="functionOne.url" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="上级id">
                <el-input v-model="functionOne.pid" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="头像">
                <el-input v-model="functionOne.icon" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-input v-model="functionOne.sort" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="saveFunctions">确 定</el-button>
        </div>
    </el-dialog>

    <el-table
            ref="multipleTable"
            :data="functions"
            style="width: 100%">
        <el-table-column
                label="编号">
            <template slot-scope="scope">
                <sidpan style="margin-left: 10px">{{ scope.row.id }}</sidpan>
            </template>
        </el-table-column>
        <el-table-column
                label="权限名">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.name }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="备注">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.description }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="路径">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.url }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="上级id">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.pid }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="头像">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.icon }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="状态">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.sort }}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">编辑
                </el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data:{
            functions:[],
            functionOne:{id:0},
            dialogFormVisible:false,

        },
        methods:{
            loadAllFunctions(){
                axios.get("/findAll")
                    .then(res=>{
                        this.functions = res.data
                    })
            },
            closeDialog(){
                this.function = {id:0}
            },
            saveFunctions(){
                let functionOne = JSON.parse(JSON.stringify(this.functionOne));
                if (functionOne.id !==0){
                    axios.put("/function",functionOne)
                        .then(res=>{
                            if (res.data==="ok"){
                                this.dialogFormVisible=false;
                                this.$message("修改权限成功！");
                                this.loadAllFunctions();
                            }
                        })
                }else {
                    axios.post("/function",functionOne)
                        .then(res=>{
                            if (res.data==="ok"){
                                this.dialogFormVisible=false;
                                this.$message("添加权限成功！");
                                this.loadAllFunctions();
                            }
                        })
                }
            },
            handleEdit(index,row){
                this.functionOne =JSON.parse(JSON.stringify(row));
                this.dialogFormVisible=true;
            },
            handleDelete(index,row){
                axios.delete("/function/"+row.id)
                    .then(res=>{
                        if (res.data==="ok"){
                            this.$message("删除权限成功！");
                            this.loadAllFunctions();
                        }
                    })
            }
        },
        mounted(){
            this.loadAllFunctions();
        }


    })
</script>
</html>